<div id="viewer-container" class="viewer-container"></div>
<script>
       DC.config.baseUrl = '../libs/dc-sdk/resources/'
      let viewer = new DC.Viewer('viewer-container')
    viewer.setOptions({
      shadows:true,
      globe:{
        baseColor:DC.Color.BLACK
      }
    })
    let layer = new DC.TilesetLayer('layer').addTo(viewer)
    let fs = `
       varying vec3 v_positionEC;
       void main(void){
           vec4 position = czm_inverseModelView * vec4(v_positionEC,1); // 位置
           float glowRange = 50.0; // 光环的移动范围(高度)
           gl_FragColor = vec4(0, 1.0, 1.0,0.8); // 颜色
           gl_FragColor *= vec4(vec3((position.z + 20.0) / 30.0), 0.2); // 渐变
           // 动态光环
           float time = fract(czm_frameNumber / 360.0);
           time = abs(time - 0.5) * 2.0;
           float diff = step(0.005, abs( clamp(position.z / glowRange, 0.0, 1.0) - time));
           gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - diff);
       }
      `
    let tileset1 = new DC.Tileset(
      '//lab.earthsdk.com/model/27af3f70003311eaae02359b3e5d0653/tileset.json'
    )

    tileset1.setCustomShader(fs)

    let tileset2 = new DC.Tileset(
      '//lab.earthsdk.com/model/212bc470003311eaae02359b3e5d0653/tileset.json'
    )
    tileset2.setCustomShader(fs)

    let tileset3 = new DC.Tileset(
      '//lab.earthsdk.com/model/1b91bf10003311eaae02359b3e5d0653/tileset.json'
    )
    tileset3.setCustomShader(fs)
    layer
      .addOverlay(tileset1)
      .addOverlay(tileset2)
      .addOverlay(tileset3)
    let layer1 = new DC.VectorLayer('layer1')
    viewer.addLayer(layer1)
    let circle = new DC.Circle('116.38789554,39.89911368',500)
    circle.setStyle({
      material: new DC.ImageMaterialProperty({
        image: '../assets/icon/circleScan.png',
        color: new DC.Color(0, 1.0, 1.0,0.8),
        transparent: true,
      }),
      perPositionHeight: true,
      outline: true,
      outlineColor: new DC.Color(0, 1.0, 1.0,0.8)
    })
    circle.rotateAmount = 3
    layer1.addOverlay(circle)
    let layer2 = new DC.PrimitiveLayer('layer').addTo(viewer)
    let scanCircle= new DC.ScanCirclePrimitive('116.3994748,39.90784756',800)
    scanCircle.setStyle({
      color:new DC.Color(0, 1.0, 1.0,0.5)
    })
    layer2.addOverlay(scanCircle)
    viewer.flyToPosition('116.3904847,39.8773787,2807.38,0,-48.89')
  }

</script>
